import React from "react";
import ReactECharts from "echarts-for-react";
import { createRoot } from "react-dom/client";
import type { EChartsOption } from "echarts";

import CustomChartTooltip, { ToolTipFonts } from "../customChartTooltip";
import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
  lineChartGridCommonConfig,
  lineChartTooltipCommonConfig,
} from "../helps";

const tooltipRootDom = document.createElement("div");

const tooltipRoot = createRoot(tooltipRootDom);

export const getAmountBarChartOption = ({
  unitName,
  brandAmount = 0,
  dataSource = [],
}: AmountBarChartProps): EChartsOption => {
  return {
    tooltip: {
      ...lineChartTooltipCommonConfig,
      formatter: (params: any) => {
        const [ds1 = {}] = params;
        tooltipRoot.render(
          <CustomChartTooltip>
            <ToolTipFonts>
              毛利总额：{brandAmount}
              {unitName}
            </ToolTipFonts>
            <ToolTipFonts>
              {ds1.name}：{ds1.value}
              {unitName}
            </ToolTipFonts>
          </CustomChartTooltip>
        );
        return tooltipRootDom;
      },
    },

    grid: {
      ...lineChartGridCommonConfig,
      containLabel: true,
    },
    yAxis: [
      {
        axisLabel: {
          color: "#AFBFE0",
          opacity: 0.8,
        },
        name: "单位：" + unitName,
        type: "value",

        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#899DBF",
            opacity: 0.29,
          },
        },
      },
    ],
    xAxis: [
      {
        type: "category",
        axisLabel: {
          color: "#AFBFE0",
          opacity: 0.8,
        },

        axisLine: {
          lineStyle: {
            color: "#899DBF",
            opacity: 0.29,
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
        data: dataSource.map((m) => m.name || ""),
      },
    ],
    series: [
      {
        barWidth: 8,
        name: "value",
        type: "bar",
        label: {
          show: false,
          position: "inside",
        },

        data: dataSource.map((m) => m.amount || 0),
        itemStyle: {
          color: ({ dataIndex }) => {
            const colorList = [
              "#76ACF6",
              "#A58B72",
              "#5E6FB7",
              "#BDBF6A",
              "#64AC5C",
              "#B8C8EC",
              "#6A9ABF",
            ];
            return colorList[dataIndex % 7];
          },
        },
      },
    ],
  };
};

export interface AmountBarChartProps extends CockpitChartBaseProps {
  unitName?: string;
  brandAmount?: any;
}

const AmountBarChart = ({
  reactEChartsProps,
  unitName = "万元",
  brandAmount,
  dataSource = [],
}: AmountBarChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      option={getAmountBarChartOption({
        unitName,
        dataSource,
        brandAmount,
      })}
      {...reactEChartsProps}
    />
  );
};

export default AmountBarChart;
